import React,{useState,useEffect} from 'react';
import styles from './css/nav.module.css'
import Musicitem from '../components/MusicItem';
import axios from 'axios'
import { NavLink } from '_react-router-dom@6.2.1@react-router-dom';
const Navtitle = () => {
    
    const [music,setMsuic]=useState({})
    const fecthData=async ()=>{
        let playlist=await axios.get('http://122.112.161.135:3000/top/playlist/highquality')
        let album=await axios.get('http://122.112.161.135:3000/album/newest')
        let result=await axios.get('http://122.112.161.135:3000/personalized')
        
            setMsuic({
                playlists:{
                    res:playlist.data.playlists.slice(0,3),
                    title:"热门音乐"
                 },
                albums:{
                    res:album.data.albums.slice(0,3),
                    title:"最新音乐"
                },
                result:{
                    res:result.data.result.slice(0,3),
                    title:"主播电台"
                }
            })
        
    }
    useEffect(()=>{
        fecthData()
    },[])
    const Nav =Object.keys(music).map(item => {
        return (
            <div key={item}>
                <div className={styles.Navtitle} >
                    <div>{music[item].title}</div>
                    <div >
                        <NavLink to="/more">更多</NavLink>
                    </div>
                </div>
                <div className={styles.item} >
                    {
                        music[item].res.map(item=>{
                            return(
                                <div key={item.id}>
                                    <Musicitem data={item}></Musicitem>
                                </div>
                            )
                        })
                    }
                    
                </div>
            </div>
        )
    })
    return (
        <div>
            {Nav}
        </div>
    );
}

export default Navtitle;
